import React, { useState } from 'react'
import { useLocation } from 'react-router-dom'
import { useGetUser } from './Hook/useGetUser'
import { useChangeUser } from './Hook/useChangeUser'
import { Space, Table, Switch, Button, Modal, Input, Tag } from 'antd'
import {
  ExclamationCircleOutlined,
  EditFilled,
  DeleteFilled,
  IdcardFilled,
} from '@ant-design/icons'
import styles from '../../styles/Traffic.module.css'

const NormalUser = () => {
  // 引入antd的相关组件
  const { Search } = Input
  const { confirm } = Modal
  // 获取路径数据
  let path = useLocation().pathname.split('/')[2]
  // 处理用户数据
  const {
    users,
    getUser,
    getSearchUser,
    deleteUser,
    delSelectUser,
    changeUserValue,
    addUser,
  } = useGetUser(path)
  // 改变用户数据
  const { changeStatus, changeLevel } = useChangeUser(path)
  // 建立一个当前选中的数据项列表
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  // 搜索函数
  const onSearch = (value) => {
    // 当搜索框中的值不为空时就进行搜索，为空时显示当前页的内容
    getSearchUser(value)
  }
  // 当选中项发生变化时触发的函数
  const onSelectChange = (newSelectedRowKeys) => {
    setSelectedRowKeys(newSelectedRowKeys)
  }
  // 当前在线状态发生变化时触发的函数
  const onChange = (val, record) => {
    changeStatus(val, record)
    getUser(path)
  }
  // 改变用户等级
  const handleChangeLevel = (record) => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: <span>真的需要升级该用户吗？</span>,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        changeLevel(record)
        getUser(path)
      },
      onCancel() {
        Modal.warning({
          title: '升级失败',
          content: '您已取消操作!',
        })
      },
    })
  }
  // 删除用户
  const handleDelUser = (record) => {
    confirm({
      icon: <ExclamationCircleOutlined />,
      content: <span>删除后不可恢复，您确定要删除吗</span>,
      okText: '确认',
      cancelText: '取消',
      onOk() {
        deleteUser(record)
      },
      onCancel() {
        Modal.warning({
          title: '删除失败',
          content: '您已取消删除!',
        })
      },
    })
  }
  // 修改用户
  const handleChangeUser = (record) => {
    changeUserValue(record)
  }
  // 删除选中
  const handleDelSelect = () => {
    delSelectUser(selectedRowKeys)
  }
  // 新增用户
  const handleAddUser = () => {
    addUser()
  }
  // 设置表头的数据来源和渲染方式
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '用户类型',
      dataIndex: 'user_type',
    },
    {
      title: '在线状态',
      dataIndex: 'user_onlinestatus',
      render: (user_onlinestatus, record) => (
        <Switch
          checked={user_onlinestatus == 'false' ? false : true}
          onChange={() => onChange(user_onlinestatus, record)}
        />
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Tag
            onClick={() => handleChangeLevel(record)}
            color="magenta"
            icon={<IdcardFilled />}
          >
            升级
          </Tag>
          <Tag
            onClick={() => handleChangeUser(record)}
            color="red"
            icon={<EditFilled />}
          >
            修改
          </Tag>
          <Tag
            onClick={() => handleDelUser(record)}
            color="volcano"
            icon={<DeleteFilled />}
          >
            删除
          </Tag>
        </Space>
      ),
    },
  ]
  // 设置左侧选择框的属性
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = []
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false
            }

            return true
          })
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = []
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true
            }

            return false
          })
          setSelectedRowKeys(newSelectedRowKeys)
        },
      },
    ],
  }

  return (
    <div>
      <div className={styles.search}>
        <span className={styles.title}>普通用户管理</span>
        <div className={styles.control}>
          <Search
            placeholder="根据用户名搜索"
            onSearch={onSearch}
            enterButton
          />
        </div>
        <div>
          <Button type="primary" onClick={handleAddUser}>
            +添加
          </Button>
          <Button type="primary" onClick={handleDelSelect} danger>
            删除选中
          </Button>
        </div>
      </div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={users} />
    </div>
  )
}
export default NormalUser
